<template>
    <div>
        <h1>后端文档</h1>
    </div>
    <el-table :data="tableData" style="width: 100%">
        <!-- ID 列 -->
        <el-table-column prop="id" label="ID" width="50">
            <template #default="scope">
                {{ scope.row.id }}
            </template>
        </el-table-column>

        <!-- 姓名 列 -->
        <el-table-column prop="name" label="姓名" width="100">
            <template #default="scope">
                <span :style="{ color: scope.row.age > 28 ? 'red' : 'green' }">
                    {{ scope.row.name }}
                </span>
            </template>
        </el-table-column>

        <!-- 年龄 列 -->
        <el-table-column prop="age" label="年龄" width="80"></el-table-column>

        <!-- 性别 列 -->
        <el-table-column prop="gender" label="性别" width="100">
            <template #default="scope">
                {{ getGenderText(scope.row.gender) }}
            </template>
        </el-table-column>

        <!-- 状态 列 -->
        <el-table-column prop="status" label="状态" width="200">
            <template #default="scope">
                <el-switch   v-model="scope.row.status" 
                             active-value="1" inactive-value="0" 
                             active-text="启用" inactive-text="禁用" 
                            @change="handleStatusChange(scope.row)">
                </el-switch>
            </template>
        </el-table-column>

        <!-- 操作 列 -->
        <el-table-column label="操作" >
            <template #default="scope">
                <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
                <el-button size="mini" type="danger" @click="handleRowDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>


    <!-- 自定义空状态 -->
    <!--  <template #empty>
    <div style="text-align: center; padding: 20px;">
      <i class="el-icon-warning-outline"></i>
      <p>暂无数据</p>
    </div>
  </template> -->

</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 定义表格数据的接口
interface TableRow {
  id: number;
  name: string;
  age: number;
  gender: number; // 1: 男, 2: 女
  status: number; // 1: 启用, 0: 禁用
}

// 初始化表格数据
const tableData = ref<TableRow[]>([
  { id: 1, name: '张三', age: 25, gender: 1, status: 1 },
  { id: 2, name: '李四', age: 30, gender: 2, status: 0 },
  // 更多数据
]);

// 获取性别的中文表示
const getGenderText = (gender: number): string => {
  switch (gender) {
    case 1:
      return '男';
    case 2:
      return '女';
    default:
      return '未知';
  }
};

// 编辑行的处理函数
const handleEdit = (index: number, row: TableRow) => {
  // 编辑逻辑
  ElMessage({
    message: `编辑第 ${index + 1} 行: ${row.name}`,
    type: 'info',
  });
};

// 删除行的处理函数
const handleRowDelete = (index: number, row: TableRow) => {
  ElMessageBox.confirm(`确定删除 ${row.name} 吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      tableData.value.splice(index, 1);
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
};

// 状态切换的处理函数
const handleStatusChange = (row: TableRow) => {
  // 更新状态逻辑，可以调用 API 等
  ElMessage({
    message: `已将 ${row.name} 的状态更改为 ${row.status === 1 ? '启用' : '禁用'}`,
    type: 'success',
  });
};
</script>

<style scoped>
.el-button {
  margin-right: 5px;
}
</style>